<template>
    <!-- <div class="login-wrap">
      <div class="ms-title">music 后台管理登录</div>
      <div class="ms-login">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm">登录</el-button>
          </div>
        </el-form>
      </div>
    </div> -->

    <kinesis-container>
    <div class="login-wrap">
      <kinesis-element :parallaxStrength="4" :type="parallax">
        <div class="login-box">
          <img src="@/assets/img/logo-a.png" class="nice-logo" />
          <p>NICEMUSIC</p>
          <div class="login-form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <div class="login-input">
                <el-form-item prop="username">
                  <el-input
                    class="login-text"
                    type="text"
                    placeholder="请输入账号"
                    v-model="ruleForm.username"
                  ></el-input>
                  <span class="login-focus"></span>
                  <span class="login-symbol">
                    <i class="iconfont nicephone2"></i>
                  </span>
                </el-form-item>
              </div>
              <div class="login-input">
                <el-form-item prop="password">
                  <el-input
                    class="login-text"
                    type="password"
                    placeholder="请输入密码"
                    v-model="ruleForm.password"
                    @keyup.enter.native="login('ruleForm')"
                  ></el-input>
                  <span class="login-focus"></span>
                  <span class="login-symbol">
                    <i class="iconfont nicemima"></i>
                  </span>
                </el-form-item>
              </div>
              <div class="login-footer">
                <div class="login-btn-wrap">
                  <el-button
                    class="login-btn"
                    type="primary"
                    :loading="loginLoading"
                    @click="submitForm"
                    >登录</el-button
                  >
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </kinesis-element>
    </div>
  </kinesis-container>
  <!-- .login-wrap {
  position: relative;
  background: url("../assets/img/background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin-top: -60px;
}
.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #000;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 160px;
  margin-left: -190px;
  margin-top: -150px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}
.login-btn button {
  width: 100%;
} -->
</template>


<script>
import {mixin} from "@/mixins/index"
import {getLoginStatus} from "@/api/index"
import { KinesisContainer, KinesisElement } from 'vue-kinesis'
export default {
  mixins: [mixin],
  name: '',
  components: {
    KinesisContainer,
    KinesisElement
  },
  props: {},
  data () {
    return {
      ruleForm: {
        username: 'admin',
        password: '1'
      },
      rules:{
        username:[
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ]
      },
      loginLoading: false,
      parallax: 'depth'
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    submitForm(){
      let params = new URLSearchParams();
      params.append("name",this.ruleForm.username);
      params.append("password",this.ruleForm.password);
      getLoginStatus(params)
        .then((res) =>{
          if(res.code == 1){
            localStorage.setItem('userName',this.ruleForm.username);
            this.$router.push("/Info");
            this.notify("登录成功","success");
          }else{
            this.notify("登录失败","error");
          }
        });
    }
  }
}
</script>
<style>

.login-wrap {
  position: relative;
  background: url("../assets/img/background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin-top: -60px;
  padding: 28px;
  min-height: 100vh;
}
.nice-logo {
  width: 155px;
  margin: 40px 0 0px;
}
.login-box {
  overflow: hidden;
  height: 486px;
  position: relative;
  width: 350px;
  max-width: 350px;
  margin: 4em auto;
  background: #FFF;
  background: url("../assets/img/logbg.jpg");
  border-radius: 8px;
  box-shadow: 1px 2px 15px rgba(0,0,0,.3);
  background-repeat: no-repeat;
  background-position: bottom;
  text-align: center;
}
.login-input {
  margin-bottom: 10px;
}
.login-text {
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  display: block;
  width: 100%;
  border: 1px solid #e3e7ed;
  height: 42px;
  border-radius: 3px;
  padding: 0 0 0 0;
}
</style>
